<template>
	<div>
		<tabTitle title="任务处理"></tabTitle>
		<!-- 任务审批 -->
		<block v-if="type ==2">
			<div class="backGround">
				<view class="item flex align-items ">
					<view class="item_left">处理状态：</view>
					<view class="item_right  flex align-items">
						<u-input v-model="approval.processState" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
						<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">处理内容：</view>
					<view class="item_right  flex align-items">
						<u--textarea v-model="approval.processContent" disabled placeholder="请输入内容"
							autoHeight></u--textarea>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">是否延期：</view>
					<view class="item_right  flex align-items">
						<view class="item_right  flex align-items">
							<div class="mshh">
								<image src="/static/img/index/yixuanzhong.png" mode="" v-if="approval.ifDefer !=0">
								</image>
								<image src="/static/img/index/xuanzhong.png" mode="" v-if="approval.ifDefer ==0">
								</image>
								<div>未延期</div>
							</div>
							<div class="mshh">
								<image src="/static/img/index/yixuanzhong.png" mode="" v-if="approval.ifDefer !=1">
								</image>
								<image src="/static/img/index/xuanzhong.png" mode="" v-if="approval.ifDefer ==1">
								</image>
								<div>已延期</div>
							</div>
						</view>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">处理人：</view>
					<view class="item_right  flex align-items">
						<u-input v-model="approval.processUserStr" placeholder="默认当前登录人" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
				<view class="item flex align-items  " style="border-bottom: none;">
					<view class="item_left">处理时间：</view>
					<view class="item_right  flex align-items">
						<u-input v-model="approval.processDate" placeholder="默认当前日期" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
			</div>
		</block>
		<!-- 延期审批 -->
		<block v-if="type ==1">
			<div class="backGround">
				<view class="item flex align-items ">
					<view class="item_left">延期至：</view>
					<view class="item_right  flex align-items">
						<u-input v-model="approval.delayDate" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>

					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left"> 延期原因：</view>
					<view class="item_right  flex align-items">
						<u--textarea v-model="approval.reason" placeholder="请输入内容" autoHeight></u--textarea>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">申请人：</view>
					<view class="item_right  flex align-items">
						<u-input v-model="approval.createUserStr" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">申请人部门：</view>
					<view class="item_right  flex align-items">
						<u-input v-model="approval.deptStr" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">申请时间：</view>
					<view class="item_right  flex align-items">
						<u-input v-model="approval.createDate" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
			</div>
		</block>
		<!-- 处理记录 -->
		<div class="records flex align-items justify-content-between">
			<tabTitle title="处理记录"></tabTitle>
			<div class="expand" @click="expand =!expand" v-if="recordsList.length>0">{{expand ?'收起':'展开'}}</div>
		</div>
		<div>
			<block v-for="(v,i) in recordsList" :key="i">
				<div class="recordsitem" v-if="expand || (i < 1 && !expand)">
					<recordsVue :row="v"></recordsVue>
				</div>
			</block>
			<u-empty mode="history" v-if="recordsList.length<=0" text="处理记录为空">
			</u-empty>
		</div>
		<div class="records flex align-items justify-content-between">
			<tabTitle title="待办信息"></tabTitle>
			<div class="expand" @click="expandTwo =!expandTwo">{{expandTwo ?'收起':'展开'}}</div>
		</div>
		<todoVue :show="expandTwo" :form="obj" :ifReturn="true"></todoVue>
		<tabTitle title="审批信息"></tabTitle>
		<div class="backGround">
			<view class="item flex align-items ">
				<view class="item_left">审核结果：</view>
				<view class="item_right  flex align-items">
					<view class="item_right  flex align-items">
						<div @click="stateTabs(1)" class="mshh">
							<image src="/static/img/index/yixuanzhong.png" mode="" v-if="form.state  !=1">
							</image>
							<image src="/static/img/index/xuanzhong.png" mode="" v-if="form.state  ==1">
							</image>
							<div>通过</div>
						</div>
						<div @click="stateTabs(2)" class="mshh">
							<image src="/static/img/index/yixuanzhong.png" mode="" v-if="form.state  !=2">
							</image>
							<image src="/static/img/index/xuanzhong.png" mode="" v-if="form.state  ==2">
							</image>
							<div>驳回</div>
						</div>
					</view>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">备注：</view>
				<view class="item_right  flex align-items">
					<u--textarea v-model="form.approvalRemark" :disabled="state ==1" placeholder="请输入审批备注"
						autoHeight></u--textarea>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">审批人：</view>
				<view class="item_right  flex align-items">
					<u-input v-model="form.user" placeholder="默认当前登录人" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
				</view>
			</view>
			<view class="item flex align-items  " style="border-bottom: none;">
				<view class="item_left">审批时间：</view>
				<view class="item_right  flex align-items">
					<u-input v-model="form.date" placeholder="默认当前日期" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
				</view>
			</view>
		</div>


		<div class="btn" v-if="state !=1">
			<div class="submit" @click="submit">提交</div>
		</div>

		<u-popup :show="show" @close="close" @open="open" mode="center">
			<view class="popup">
				<div class="title">延期申请</div>
				<view class="item flex align-items ">
					<view class="item_left">延期至：</view>
					<view class="item_right  flex align-items" @click="templateBtn">
						<u-input v-model="form.name" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
						<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">延期原因：</view>
					<view class="item_right  flex align-items" @click="templateBtn">
						<u--textarea v-model="form.name" placeholder="请输入内容" autoHeight></u--textarea>
					</view>
				</view>
				<div class="popupBtn flex">
					<div class="close" @click="show =false">取消</div>
					<div class="submit" @click="show =false">提交</div>
				</div>
			</view>
		</u-popup>
	</div>
</template>

<script>
	import tabTitle from '@/components/tabTitle.vue'
	import recordsVue from './components/records.vue'
	import todoVue from './components/to-do.vue'
	import {
		handlePeriodStr,
		handleLevelStr
	} from '@/utils/newMap.js'
	import {
		getHandleApprovalDetails,
		getProcessRecordList,
		submitHandleApproval
	} from '@/api/supervise.js'
	import {
		getOperateUser
	} from '@/api/lssue.js'
	export default {
		components: {
			tabTitle,
			recordsVue,
			todoVue
		},
		data() {
			return {
				handlePeriodStr,
				handleLevelStr,
				form: {
					approvalRemark: '',
					state: 1,
					user: '',
					date: ''
				},
				expand: false,
				expandTwo: false,
				show: false,
				type: 1, //1是任务审批2是延期审批
				id: null,
				obj: {},
				approval: {},
				recordsList: [],
				state: 0
			}
		},
		onLoad(option) {
			this.type = option.type
			this.id = option.id
			this.state = option.state
			this._getInfo()
			this._getProcessRecordList()
			if (this.state != 1) {
				this._getOperateUser()
			}
		},
		methods: {
			stateTabs(type) {
				if (this.state == 1) return
				this.form.state = type
			},
			async submit() {
				if (this.form.approvalRemark === '') return uni.$u.toast('请填写审批内容')
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				try {
					const res = await submitHandleApproval({
						id: this.id,
						...this.form
					})
					console.log();
					uni.$u.toast('操作成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 300);
				} catch (e) {
					//TODO handle the exception
					uni.$u.toast('操作失败，稍后重试')
				} finally {
					uni.hideLoading()
				}

			},
			// 获取当前登录人信息
			async _getOperateUser() {
				const res = await getOperateUser()
				const userInfo = res.datas
				this.form.user = userInfo.login_user_name
				this.form.date = this.getCurrentDateTime()
			},
			_getInfo(id) {
				getHandleApprovalDetails({
					id: this.id
				}).then(res => {
					console.log(res);
					res.datas.handle.fileUrl = res.datas.handle.fileUrl ? JSON.parse(res.datas.handle.fileUrl) : ''
					res.datas.handle.handleLevelStr = this.handleLevelStr.get(res.datas.handle.handleLevel - 0)
					res.datas.handle.handlePeriodStr = this.handlePeriodStr.get(res.datas.handle.handlePeriod - 0)
					this.obj = res.datas.handle
					this.approval = res.datas.approval
					this.approval.processState = res.datas.approval.processState == 0 ? '进行中' : '已完成'
					if (this.state == 1) {
						this.form = {
							state: res.datas.approval.state,
							approvalRemark: res.datas.approval.approvalRemark,
							user: res.datas.approval.updateUserStr,
							date: res.datas.approval.updateDate
						}
					}

				})
			},
			_getProcessRecordList() {
				getProcessRecordList({
					id: this.id,
					PAGE_NO: 1,
					PAGE_SIZE: 100000
				}).then(res => {
					console.log(res);
					this.recordsList = res.rows
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.task {
		background-color: #FFF;
	}

	.popupBtn {
		height: 80rpx;
		text-align: center;
		margin: 20rpx 0;
		padding: 0 10rpx;
		justify-content: space-around;

		.close {
			flex: 0 0 40%;
			line-height: 80rpx;
			border: 1rpx solid #E6E6E6;
		}

		.submit {
			flex: 0 0 40%;
			line-height: 80rpx;
			background-color: #267DFF;
			color: #FFF;
		}

	}

	.title {
		text-align: center;
		margin: 15rpx 0;
		font-weight: bold;
	}

	.popup {
		width: 730rpx;
	}

	.btn {
		display: flex;
		margin-top: 30rpx;

		.yanqi {
			flex: 1;
			border: 1rpx solid #267DFF;
			color: #267DFF;
			height: 80rpx;
			text-align: center;
			line-height: 78rpx;
			border-right: none;
		}

		.submit {
			// width: 300rpx;
			flex: 1;
			text-align: center;
			line-height: 80rpx;
			background-color: #267DFF;
			color: #FFF;
		}
	}

	.recordsitem {
		margin-top: 30rpx;
	}

	.recordsitem:nth-child(1) {
		margin-top: 0;
	}

	.backGround {
		background-color: #FFF;
		padding-bottom: 5rpx;
	}

	.expand {
		border: 1rpx solid #267DFF;
		border-radius: 8rpx;
		width: 120rpx;
		text-align: center;
		height: 60rpx;
		line-height: 58rpx;
		margin-right: 30rpx;
		color: #267DFF;
	}

	.item {
		min-height: 100rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding: 0 31rpx;

		&_left {
			// width: 220rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_left::before {
			content: '*';
			color: #FF0000;
		}

		&_right {
			flex: 1;

			/deep/.u-input {
				height: 65rpx;
				margin: 0 auto;
				font-size: 16rpx;
			}
		}

		&_fu {
			width: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_upload {
			width: 240rpx;
			height: 60rpx;
			background: #267DFF;
			text-align: center;
			line-height: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
		}

	}

	.mshh {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		font-size: 33rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	/deep/ .u-textarea--disabled {
		background-color: #FFF !important;

	}

	/deep/ .uni-textarea-textarea {
		color: black !important;
		font-size: 16px;
	}
</style>